<template>
  <div class="event-schedule-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-left">
        <el-button @click="$router.back()">
          <IconifyIconOffline icon="ep:back" class="mr-1" />
          返回
        </el-button>
        <div class="header-info">
          <h1 class="event-title">{{ event.name }}</h1>
          <p class="event-subtitle">赛程安排</p>
        </div>
      </div>

      <div class="header-actions">
        <el-button type="primary" @click="showAddMatchDialog = true">
          <IconifyIconOffline icon="ep:plus" class="mr-1" />
          添加比赛
        </el-button>
        <el-button @click="generateSchedule">
          <IconifyIconOffline icon="ep:refresh" class="mr-1" />
          自动排程
        </el-button>
        <el-button @click="exportSchedule">
          <IconifyIconOffline icon="ep:download" class="mr-1" />
          导出赛程
        </el-button>
      </div>
    </div>

    <!-- 赛程筛选 -->
    <el-card class="filter-card" shadow="never">
      <div class="filter-content">
        <el-form :model="filterForm" inline>
          <el-form-item label="比赛日期">
            <el-date-picker
              v-model="filterForm.date"
              type="date"
              placeholder="选择日期"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              clearable
            />
          </el-form-item>

          <el-form-item label="比赛阶段">
            <el-select
              v-model="filterForm.stage"
              placeholder="选择阶段"
              clearable
            >
              <el-option label="小组赛" value="group" />
              <el-option label="淘汰赛" value="knockout" />
              <el-option label="半决赛" value="semifinal" />
              <el-option label="决赛" value="final" />
            </el-select>
          </el-form-item>

          <el-form-item label="比赛状态">
            <el-select
              v-model="filterForm.status"
              placeholder="选择状态"
              clearable
            >
              <el-option label="未开始" value="pending" />
              <el-option label="进行中" value="ongoing" />
              <el-option label="已结束" value="completed" />
              <el-option label="已取消" value="cancelled" />
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="handleFilter">
              <IconifyIconOffline icon="ep:search" class="mr-1" />
              筛选
            </el-button>
            <el-button @click="resetFilter"> 重置 </el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>

    <!-- 赛程视图切换 -->
    <el-card class="view-card" shadow="never">
      <div class="view-header">
        <el-radio-group v-model="viewMode" @change="handleViewChange">
          <el-radio-button label="timeline">时间轴视图</el-radio-button>
          <el-radio-button label="table">表格视图</el-radio-button>
          <el-radio-button label="bracket">对阵图</el-radio-button>
        </el-radio-group>

        <div class="view-info">
          <el-tag type="info">共 {{ filteredMatches.length }} 场比赛</el-tag>
        </div>
      </div>

      <!-- 时间轴视图 -->
      <div v-if="viewMode === 'timeline'" class="timeline-view">
        <div
          v-for="(dayMatches, date) in groupedMatches"
          :key="date"
          class="day-section"
        >
          <div class="day-header">
            <h3>{{ formatDate(date) }}</h3>
            <el-tag>{{ dayMatches.length }} 场比赛</el-tag>
          </div>

          <el-timeline>
            <el-timeline-item
              v-for="match in dayMatches"
              :key="match.id"
              :timestamp="formatTime(match.startTime)"
              placement="top"
              :type="getMatchStatusType(match.status)"
            >
              <div class="match-card">
                <div class="match-header">
                  <div class="match-info">
                    <span class="match-stage">{{
                      getStageName(match.stage)
                    }}</span>
                    <span class="match-round">{{ match.round }}</span>
                  </div>

                  <div class="match-actions">
                    <el-button
                      type="primary"
                      link
                      size="small"
                      @click="viewMatch(match)"
                    >
                      查看
                    </el-button>
                    <el-button
                      type="warning"
                      link
                      size="small"
                      @click="editMatch(match)"
                    >
                      编辑
                    </el-button>
                    <el-button
                      type="danger"
                      link
                      size="small"
                      @click="deleteMatch(match)"
                    >
                      删除
                    </el-button>
                  </div>
                </div>

                <div class="match-teams">
                  <div class="team team-a">
                    <span class="team-name">{{ match.teamA }}</span>
                    <span v-if="match.scoreA !== null" class="team-score">{{
                      match.scoreA
                    }}</span>
                  </div>

                  <div class="vs-divider">VS</div>

                  <div class="team team-b">
                    <span class="team-name">{{ match.teamB }}</span>
                    <span v-if="match.scoreB !== null" class="team-score">{{
                      match.scoreB
                    }}</span>
                  </div>
                </div>

                <div class="match-details">
                  <div class="detail-item">
                    <IconifyIconOffline icon="ep:location" />
                    <span>{{ match.venue }}</span>
                  </div>

                  <div class="detail-item">
                    <IconifyIconOffline icon="ep:user" />
                    <span>裁判：{{ match.referee || "待安排" }}</span>
                  </div>

                  <div class="detail-item">
                    <el-tag
                      :type="getMatchStatusType(match.status)"
                      size="small"
                    >
                      {{ getMatchStatusText(match.status) }}
                    </el-tag>
                  </div>
                </div>
              </div>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>

      <!-- 表格视图 -->
      <div v-if="viewMode === 'table'" class="table-view">
        <el-table :data="filteredMatches" stripe>
          <el-table-column prop="id" label="比赛ID" width="80" />

          <el-table-column label="比赛时间" width="160">
            <template #default="{ row }">
              <div>{{ formatDateTime(row.startTime) }}</div>
            </template>
          </el-table-column>

          <el-table-column prop="stage" label="阶段" width="100">
            <template #default="{ row }">
              {{ getStageName(row.stage) }}
            </template>
          </el-table-column>

          <el-table-column prop="round" label="轮次" width="120" />

          <el-table-column label="对阵" min-width="200">
            <template #default="{ row }">
              <div class="table-teams">
                <span class="team-name">{{ row.teamA }}</span>
                <span class="vs">VS</span>
                <span class="team-name">{{ row.teamB }}</span>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="比分" width="100">
            <template #default="{ row }">
              <span v-if="row.scoreA !== null && row.scoreB !== null">
                {{ row.scoreA }} : {{ row.scoreB }}
              </span>
              <span v-else class="text-gray">-</span>
            </template>
          </el-table-column>

          <el-table-column prop="venue" label="场地" width="120" />

          <el-table-column prop="referee" label="裁判" width="100">
            <template #default="{ row }">
              {{ row.referee || "待安排" }}
            </template>
          </el-table-column>

          <el-table-column prop="status" label="状态" width="100">
            <template #default="{ row }">
              <el-tag :type="getMatchStatusType(row.status)" size="small">
                {{ getMatchStatusText(row.status) }}
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column label="操作" width="180">
            <template #default="{ row }">
              <el-button
                type="primary"
                link
                size="small"
                @click="viewMatch(row)"
              >
                查看
              </el-button>
              <el-button
                type="warning"
                link
                size="small"
                @click="editMatch(row)"
              >
                编辑
              </el-button>
              <el-button
                type="danger"
                link
                size="small"
                @click="deleteMatch(row)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 对阵图视图 -->
      <div v-if="viewMode === 'bracket'" class="bracket-view">
        <div class="bracket-container">
          <div
            v-for="(stageMatches, stage) in bracketData"
            :key="stage"
            class="bracket-stage"
          >
            <h4 class="stage-title">{{ getStageName(stage) }}</h4>

            <div class="stage-matches">
              <div
                v-for="match in stageMatches"
                :key="match.id"
                class="bracket-match"
              >
                <div
                  class="bracket-team"
                  :class="{ winner: match.winner === 'A' }"
                >
                  <span class="team-name">{{ match.teamA }}</span>
                  <span v-if="match.scoreA !== null" class="team-score">{{
                    match.scoreA
                  }}</span>
                </div>

                <div
                  class="bracket-team"
                  :class="{ winner: match.winner === 'B' }"
                >
                  <span class="team-name">{{ match.teamB }}</span>
                  <span v-if="match.scoreB !== null" class="team-score">{{
                    match.scoreB
                  }}</span>
                </div>

                <div class="match-time">{{ formatTime(match.startTime) }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 添加比赛对话框 -->
    <el-dialog
      v-model="showAddMatchDialog"
      title="添加比赛"
      width="600px"
      :before-close="handleCloseAddDialog"
    >
      <el-form
        ref="matchFormRef"
        :model="matchForm"
        :rules="matchRules"
        label-width="100px"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="比赛阶段" prop="stage">
              <el-select v-model="matchForm.stage" placeholder="选择阶段">
                <el-option label="小组赛" value="group" />
                <el-option label="淘汰赛" value="knockout" />
                <el-option label="半决赛" value="semifinal" />
                <el-option label="决赛" value="final" />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="轮次" prop="round">
              <el-input v-model="matchForm.round" placeholder="如：第1轮" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="队伍A" prop="teamA">
              <el-select
                v-model="matchForm.teamA"
                placeholder="选择队伍A"
                filterable
              >
                <el-option
                  v-for="team in availableTeams"
                  :key="team.id"
                  :label="team.name"
                  :value="team.name"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="队伍B" prop="teamB">
              <el-select
                v-model="matchForm.teamB"
                placeholder="选择队伍B"
                filterable
              >
                <el-option
                  v-for="team in availableTeams"
                  :key="team.id"
                  :label="team.name"
                  :value="team.name"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="比赛时间" prop="startTime">
              <el-date-picker
                v-model="matchForm.startTime"
                type="datetime"
                placeholder="选择比赛时间"
                format="YYYY-MM-DD HH:mm"
                value-format="YYYY-MM-DD HH:mm:ss"
              />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="比赛场地" prop="venue">
              <el-input v-model="matchForm.venue" placeholder="输入场地" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="裁判" prop="referee">
          <el-input v-model="matchForm.referee" placeholder="输入裁判姓名" />
        </el-form-item>

        <el-form-item label="备注">
          <el-input
            v-model="matchForm.remark"
            type="textarea"
            :rows="3"
            placeholder="输入备注信息"
          />
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleCloseAddDialog">取消</el-button>
          <el-button type="primary" @click="handleAddMatch">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { IconifyIconOffline } from "@/components/ReIcon";
import dayjs from "dayjs";

const route = useRoute();
const router = useRouter();

// 赛事信息
const event = ref({
  id: 1,
  name: "2024年春季羽毛球锦标赛",
  startDate: "2024-03-15",
  endDate: "2024-03-17"
});

// 视图模式
const viewMode = ref("timeline");

// 筛选表单
const filterForm = ref({
  date: "",
  stage: "",
  status: ""
});

// 比赛列表
const matches = ref([
  {
    id: 1,
    stage: "group",
    round: "小组赛第1轮",
    teamA: "飞羽队",
    teamB: "雄鹰队",
    scoreA: 21,
    scoreB: 18,
    winner: "A",
    startTime: "2024-03-15 09:00:00",
    venue: "1号场地",
    referee: "李裁判",
    status: "completed",
    remark: ""
  },
  {
    id: 2,
    stage: "group",
    round: "小组赛第1轮",
    teamA: "闪电队",
    teamB: "风暴队",
    scoreA: null,
    scoreB: null,
    winner: null,
    startTime: "2024-03-15 10:30:00",
    venue: "2号场地",
    referee: "王裁判",
    status: "pending",
    remark: ""
  },
  {
    id: 3,
    stage: "knockout",
    round: "淘汰赛第1轮",
    teamA: "飞羽队",
    teamB: "猛虎队",
    scoreA: null,
    scoreB: null,
    winner: null,
    startTime: "2024-03-16 14:00:00",
    venue: "1号场地",
    referee: "张裁判",
    status: "pending",
    remark: ""
  },
  {
    id: 4,
    stage: "final",
    round: "决赛",
    teamA: "待定",
    teamB: "待定",
    scoreA: null,
    scoreB: null,
    winner: null,
    startTime: "2024-03-17 15:00:00",
    venue: "中央场地",
    referee: "主裁判",
    status: "pending",
    remark: "冠军争夺战"
  }
]);

// 可用队伍
const availableTeams = ref([
  { id: 1, name: "飞羽队" },
  { id: 2, name: "雄鹰队" },
  { id: 3, name: "闪电队" },
  { id: 4, name: "风暴队" },
  { id: 5, name: "猛虎队" },
  { id: 6, name: "神鹰队" }
]);

// 添加比赛对话框
const showAddMatchDialog = ref(false);
const matchFormRef = ref();

// 比赛表单
const matchForm = ref({
  stage: "",
  round: "",
  teamA: "",
  teamB: "",
  startTime: "",
  venue: "",
  referee: "",
  remark: ""
});

// 表单验证规则
const matchRules = {
  stage: [{ required: true, message: "请选择比赛阶段", trigger: "change" }],
  round: [{ required: true, message: "请输入轮次", trigger: "blur" }],
  teamA: [{ required: true, message: "请选择队伍A", trigger: "change" }],
  teamB: [{ required: true, message: "请选择队伍B", trigger: "change" }],
  startTime: [{ required: true, message: "请选择比赛时间", trigger: "change" }],
  venue: [{ required: true, message: "请输入比赛场地", trigger: "blur" }]
};

// 筛选后的比赛
const filteredMatches = computed(() => {
  return matches.value.filter(match => {
    if (
      filterForm.value.date &&
      !match.startTime.startsWith(filterForm.value.date)
    ) {
      return false;
    }
    if (filterForm.value.stage && match.stage !== filterForm.value.stage) {
      return false;
    }
    if (filterForm.value.status && match.status !== filterForm.value.status) {
      return false;
    }
    return true;
  });
});

// 按日期分组的比赛
const groupedMatches = computed(() => {
  const grouped: Record<string, any[]> = {};
  filteredMatches.value.forEach(match => {
    const date = match.startTime.split(" ")[0];
    if (!grouped[date]) {
      grouped[date] = [];
    }
    grouped[date].push(match);
  });

  // 按时间排序
  Object.keys(grouped).forEach(date => {
    grouped[date].sort((a, b) => a.startTime.localeCompare(b.startTime));
  });

  return grouped;
});

// 对阵图数据
const bracketData = computed(() => {
  const bracket: Record<string, any[]> = {};
  filteredMatches.value.forEach(match => {
    if (!bracket[match.stage]) {
      bracket[match.stage] = [];
    }
    bracket[match.stage].push(match);
  });
  return bracket;
});

// 格式化日期
const formatDate = (date: string) => {
  return dayjs(date).format("YYYY年MM月DD日 dddd");
};

// 格式化时间
const formatTime = (dateTime: string) => {
  return dayjs(dateTime).format("HH:mm");
};

// 格式化日期时间
const formatDateTime = (dateTime: string) => {
  return dayjs(dateTime).format("MM-DD HH:mm");
};

// 获取阶段名称
const getStageName = (stage: string) => {
  const stageMap: Record<string, string> = {
    group: "小组赛",
    knockout: "淘汰赛",
    semifinal: "半决赛",
    final: "决赛"
  };
  return stageMap[stage] || stage;
};

// 获取比赛状态类型
const getMatchStatusType = (status: string) => {
  const statusMap: Record<string, string> = {
    pending: "info",
    ongoing: "warning",
    completed: "success",
    cancelled: "danger"
  };
  return statusMap[status] || "info";
};

// 获取比赛状态文本
const getMatchStatusText = (status: string) => {
  const statusMap: Record<string, string> = {
    pending: "未开始",
    ongoing: "进行中",
    completed: "已结束",
    cancelled: "已取消"
  };
  return statusMap[status] || "未知";
};

// 处理筛选
const handleFilter = () => {
  // 筛选逻辑已在计算属性中实现
  ElMessage.success("筛选完成");
};

// 重置筛选
const resetFilter = () => {
  filterForm.value = {
    date: "",
    stage: "",
    status: ""
  };
};

// 视图切换
const handleViewChange = (mode: string) => {
  console.log("切换视图:", mode);
};

// 查看比赛
const viewMatch = (match: any) => {
  router.push(`/match/detail/${match.id}`);
};

// 编辑比赛
const editMatch = (match: any) => {
  // 填充表单数据
  matchForm.value = { ...match };
  showAddMatchDialog.value = true;
};

// 删除比赛
const deleteMatch = async (match: any) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除比赛 "${match.teamA} VS ${match.teamB}" 吗？`,
      "确认删除",
      {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }
    );

    // 这里应该调用API删除比赛
    const index = matches.value.findIndex(m => m.id === match.id);
    if (index > -1) {
      matches.value.splice(index, 1);
    }

    ElMessage.success("删除成功");
  } catch {
    // 用户取消
  }
};

// 自动排程
const generateSchedule = async () => {
  try {
    await ElMessageBox.confirm(
      "自动排程将重新安排所有比赛时间，确定要继续吗？",
      "确认自动排程",
      {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }
    );

    // 这里应该调用API自动排程
    ElMessage.success("自动排程完成");
  } catch {
    // 用户取消
  }
};

// 导出赛程
const exportSchedule = () => {
  // 这里应该调用导出API
  ElMessage.success("导出成功");
};

// 添加比赛
const handleAddMatch = async () => {
  if (!matchFormRef.value) return;

  try {
    await matchFormRef.value.validate();

    // 检查队伍是否相同
    if (matchForm.value.teamA === matchForm.value.teamB) {
      ElMessage.error("队伍A和队伍B不能相同");
      return;
    }

    // 这里应该调用API添加比赛
    const newMatch = {
      id: Date.now(),
      ...matchForm.value,
      scoreA: null,
      scoreB: null,
      winner: null,
      status: "pending"
    };

    matches.value.push(newMatch);

    ElMessage.success("添加成功");
    handleCloseAddDialog();
  } catch (error) {
    console.error("表单验证失败:", error);
  }
};

// 关闭添加对话框
const handleCloseAddDialog = () => {
  showAddMatchDialog.value = false;
  matchForm.value = {
    stage: "",
    round: "",
    teamA: "",
    teamB: "",
    startTime: "",
    venue: "",
    referee: "",
    remark: ""
  };
  if (matchFormRef.value) {
    matchFormRef.value.clearValidate();
  }
};

// 加载赛事赛程
const loadEventSchedule = async () => {
  const eventId = route.params.id;
  // 这里应该根据ID调用API获取赛事赛程
  console.log("加载赛事赛程:", eventId);
};

onMounted(() => {
  loadEventSchedule();
});
</script>

<style scoped lang="scss">
.event-schedule-container {
  padding: 20px;
  background-color: #f5f7fa;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;

  .header-left {
    display: flex;
    align-items: center;
    gap: 16px;

    .header-info {
      .event-title {
        font-size: 24px;
        font-weight: 600;
        color: #303133;
        margin: 0 0 4px 0;
      }

      .event-subtitle {
        font-size: 14px;
        color: #909399;
        margin: 0;
      }
    }
  }

  .header-actions {
    display: flex;
    gap: 8px;
  }
}

.filter-card,
.view-card {
  margin-bottom: 20px;
}

.filter-content {
  .el-form {
    margin-bottom: 0;
  }
}

.view-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;

  .view-info {
    display: flex;
    gap: 8px;
  }
}

// 时间轴视图
.timeline-view {
  .day-section {
    margin-bottom: 30px;

    .day-header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 16px;

      h3 {
        font-size: 18px;
        font-weight: 600;
        color: #303133;
        margin: 0;
      }
    }

    .match-card {
      background-color: white;
      border-radius: 8px;
      padding: 16px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

      .match-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;

        .match-info {
          display: flex;
          gap: 8px;

          .match-stage {
            background-color: #409eff;
            color: white;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 12px;
          }

          .match-round {
            color: #606266;
            font-size: 14px;
          }
        }

        .match-actions {
          display: flex;
          gap: 8px;
        }
      }

      .match-teams {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 12px;

        .team {
          display: flex;
          flex-direction: column;
          align-items: center;
          min-width: 120px;

          .team-name {
            font-weight: 600;
            color: #303133;
            margin-bottom: 4px;
          }

          .team-score {
            font-size: 24px;
            font-weight: 700;
            color: #409eff;
          }
        }

        .vs-divider {
          margin: 0 20px;
          font-weight: 600;
          color: #909399;
        }
      }

      .match-details {
        display: flex;
        gap: 20px;
        flex-wrap: wrap;

        .detail-item {
          display: flex;
          align-items: center;
          gap: 4px;
          font-size: 14px;
          color: #606266;

          .iconify {
            font-size: 16px;
          }
        }
      }
    }
  }
}

// 表格视图
.table-view {
  .table-teams {
    display: flex;
    align-items: center;
    gap: 8px;

    .team-name {
      font-weight: 500;
    }

    .vs {
      color: #909399;
      font-size: 12px;
    }
  }

  .text-gray {
    color: #c0c4cc;
  }
}

// 对阵图视图
.bracket-view {
  .bracket-container {
    display: flex;
    gap: 40px;
    overflow-x: auto;
    padding: 20px 0;

    .bracket-stage {
      min-width: 200px;

      .stage-title {
        text-align: center;
        font-size: 16px;
        font-weight: 600;
        color: #303133;
        margin: 0 0 20px 0;
        padding-bottom: 8px;
        border-bottom: 2px solid #409eff;
      }

      .stage-matches {
        display: flex;
        flex-direction: column;
        gap: 20px;

        .bracket-match {
          background-color: white;
          border-radius: 8px;
          padding: 12px;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

          .bracket-team {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px;
            border-radius: 4px;
            margin-bottom: 4px;

            &.winner {
              background-color: #f0f9ff;
              border: 1px solid #409eff;

              .team-name {
                font-weight: 600;
                color: #409eff;
              }
            }

            .team-name {
              flex: 1;
              font-size: 14px;
            }

            .team-score {
              font-weight: 600;
              font-size: 16px;
              color: #303133;
            }
          }

          .match-time {
            text-align: center;
            font-size: 12px;
            color: #909399;
            margin-top: 8px;
          }
        }
      }
    }
  }
}

.dialog-footer {
  text-align: right;
}

@media (max-width: 768px) {
  .event-schedule-container {
    padding: 10px;
  }

  .page-header {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;

    .header-actions {
      width: 100%;
      justify-content: flex-end;
    }
  }

  .view-header {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }

  .filter-content .el-form {
    .el-form-item {
      margin-bottom: 16px;
    }
  }

  .match-teams {
    .team {
      min-width: 80px;
    }

    .vs-divider {
      margin: 0 12px;
    }
  }

  .bracket-container {
    gap: 20px;

    .bracket-stage {
      min-width: 160px;
    }
  }
}
</style>
